<script setup lang="ts">
import { apiPayFeeLogs, apiOpenMatrixLogs } from "@@/api/transaction/list";
import { txidStatus } from "@@/enum/globalEnum";
import dayjs from "dayjs";
import { fixedDecimals, omitText } from "@@/utils/tools/format";
import { _require } from "@@/utils/tools";
import { useCrequestListRefs } from "@@/components/common/CrequestList";

const props = defineProps<{
  unincludes?: Function[];
}>();

const { t } = useI18n();
const tabs = computed(() =>
  [
    {
      title: t("juZhenKaiQi"),
      api: apiOpenMatrixLogs,
      logo: _require("src/assets/images/coin/usdt.png"),
    },
    {
      title: t("shouXuFei"),
      api: apiPayFeeLogs,
      logo: _require("src/assets/images/coin/bnb.png"),
    },
  ].filter((v) => !props.unincludes?.includes(v.api))
);
const CrequestListRefs = useCrequestListRefs<
  typeof apiPayFeeLogs | typeof apiOpenMatrixLogs
>();
function refresh() {
  CrequestListRefs.value.forEach((v) => v.rerequest());
}
defineExpose({ refresh });
</script>

<template>
  <Rtabs>
    <VanTab :title="tab.title" v-for="tab in tabs">
      <CrequestList ref="CrequestListRefs" :api="tab.api">
        <template #item="{ item }">
          <Ccard bg="var(--C-M1-O1)" class="clip-path-1 auto-MT-xs">
            <div class="flex-A-C">
              <Rimage size="54rem" :src="tab.logo" />
              <div class="ML-xs C-M1 shadow-M1">
                {{ fixedDecimals(item.number) }}
              </div>
              <CstateTag
                class="clip-path-1 ML-auto"
                style="--clip-size: 15rem"
                :value="item.is_confirm"
                :enum="txidStatus"
              />
            </div>
            <div>
              {{ dayjs(item.created_at).format("YYYY/MM/DD HH:mm:ss") }}
            </div>
            <CcopyText :copy-text="item.txid" class="C-T3">
              {{ omitText(item.txid) }}
            </CcopyText>
          </Ccard>
        </template>
      </CrequestList>
    </VanTab>
  </Rtabs>
</template>

<style lang="scss" scoped></style>
